<template>
    <view class="page">
        <view class="header_box">
            <view class="header_top_box">
                <view class="header_top_left_box">
                    <image
                        :src="roomInfo.avatar"
                        mode="scaleToFill"
                    />
                </view>
                <view class="header_top_mid_box">
                    <view class="Daily_box">
                        <view class="Daily_text_box">{{ roomInfo.description }}</view>
                        <view class="official_box" v-if="roomInfo.is_official == 1">官方</view>
                    </view>
                    <view class="house_flame_box">
                        <view class="flame_box">
                            <view class="house_flame_image_box">
                                <image
                                    src="https://new.qingfentool.vip/upload/image/20230814/ee568fef6547453e6924002cfd8845da.png"
                                    mode="scaleToFill" />
                            </view>
                            <view class="house_flame_text_box">{{ roomInfo.num }}</view>
                        </view>
                        <view class="sm_box">
                            <view class="box_image_box">
                                <image
                                    src="https://new.qingfentool.vip/upload/image/20230818/5864b4887b1713934864a880fa14c711.png"
                                    mode="scaleToFill" />
                            </view>
                            <view class="box_text_box">{{ roomInfo.popularity }}</view>
                        </view>
                    </view>
                </view>
                <view class="header_top_right_box">
                    <view class="header_top_right_txt_box">{{ roomInfo.lottery_time }}开奖</view>
                </view>
            </view>
            <view class="heider_line_box"></view>
            <view class="heider_bot_box">
                <view class="heider_bot_txt_box">{{ roomInfo.room_name }}</view>
            </view>
        </view>
        <view class="swiper_contont_box">
            <view class="uni-margin-wrap">
                <swiper class="swiper" :current="swipercurrent" circular next-margin="80rpx" previous-margin="80rpx"
                    :indicator-dots="false" :autoplay="autoplay" :interval="interval" :duration="duration"
                    @change="swiperChange">
                    <swiper-item v-for="(item, index) in roomInfo.prize" :key="index">
                        <view class="swiper-item uni-bg-red">
                            <view class="swiper_title_box">{{ item.prize_name }}</view>
                            <view class="swiper_pic_box">
                                <view class="zs_swiper_box">
                                    <image :src="item.prize_icon" mode="scaleToFill" />
                                </view>
                            </view>
                            <view class="swiper_prz_box">{{ item.price }}大王币</view>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
        <view class="product_box">
            <view :class="drawing == index ? 'drawing_box' : 'drawing1_box'" v-for="(item, index) in roomInfo.prize"
                :key="index" @click="product(index)">
                <image :src="item.prize_icon" mode="scaleToFill" />
            </view>
        </view>
        <view class="participant_box">
            <view class="participant_top_box">
                <view class="participant_top_left_txt_box">参与人员</view>
                <view class="participant_top_right_txt_box">
                    <view class="participant_top_right_icon_box" @click="getJionPep">
                        {{ roomInfo.count }}人参与<u-icon name="arrow-right"></u-icon>
                    </view>
                </view>
            </view>
            <view class="talocrural_box">
                <view class="talocrural_dange_box" v-for="(item, index) in roomInfo.users" :key="index">
                    <view class="people_box">
                        <image :src="item.avatar" mode="scaleToFill" />
                    </view>
                    <view class="talocrural_txt_box">{{ item.nickname }}</view>
                </view>
            </view>
        </view>
        <view class="bottom_box"></view>
        <view class="enter_box">
            <view v-if="roomInfo.is_join == 0" class="jion_box" @click.once="jionBtn">
                参加抽奖
            </view>
            <view v-else class="already_box" @click.once="jionBtn">
                已经参加，等待开奖
            </view>
            <view class="time_box">距离开奖还有
                <u-count-down font-size="24" bg-color="none" ref="uCountDown" separator="zh" separator-color="#D8D8D8"
                    :show-days="true" color="#D8D8D8" :timestamp="roomInfo.countdown" @end="endTime" ></u-count-down>
            </view>
        </view>
        <uni-popup mode="center" ref="jionTc" border-radius="20">
            <view class="detail_box">
                <view class="detail_top_box">
                    <view>参与人员</view>
                    <view>{{ roomInfo.count }}人参与</view>
                </view>
                <scroll-view scroll-y class="detail_people_box">
                    <view class="detail_dange_box" v-for="(item, index) in roomInfo.users" :key="index">
                        <view class="detail1_box">
                            <image :src="item.avatar" mode="scaleToFill" />
                        </view>
                        <view class="detail_txt_box">{{ item.nickname }}</view>
                    </view>
                </scroll-view>
            </view>
        </uni-popup>
    </view>
</template>
<script>
export default {
    data() {
        return {
            autoplay: false,
            interval: 5000,
            duration: 100,
            drawing: '',
            swipercurrent: 0,
            room_id: '',//房间id
            roomInfo: {},//房间对象
        }
    },
    onLoad(e) {
        this.room_id = e.room_id
    },
    onShow() {
        this.init()
    },
    methods: {

        init() {
            let data = {
                room_id: this.room_id
            }
            this.$Request.get(this.$api.house.welfareRoomInfo, data).then(res => {
                this.roomInfo = res.data.roomInfo
                console.log(this.roomInfo.is_join)
            })
        },
        //查看参与人
        getJionPep() {
            this.$refs.jionTc.open()
        },
        swiperChange(e) {
            this.drawing = e.detail.current
        },
        product(index) {
            this.drawing = index
            this.swipercurrent = index
        },
        // 参与抽奖
        jionBtn() {
            let data = {
                room_id: this.room_id
            }
            this.$Request.get(this.$api.house.welfareJoin, data).then(res => {
                this.init()
            })

        }
    }

}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    min-height: 100vh;
    background-color: #262626;
    padding-top: 20rpx;

    .header_box {
        width: 684rpx;
        height: 251rpx;
        background: #393834;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        opacity: 1;
        border: 1rpx solid #D8D6AF;
        margin: auto;
        padding: 0 32rpx;
        margin-bottom: 37rpx;

        .header_top_box {
            width: 100%;
            height: 150rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .header_top_left_box {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                background-color: #fff;
                image{
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }

            .header_top_mid_box {
                width: 250rpx;
                height: 100%;

                .Daily_box {
                    width: 100%;
                    height: 37rpx;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin-top: 39rpx;
                    margin-bottom: 4rpx;

                    .Daily_text_box {
                        height: 37rpx;
                        font-size: 28rpx;
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #FCFCFC;
                        line-height: 36rpx;
                        margin-right: 6rpx;
                        overflow-x: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .official_box {
                        width: 45rpx;
                        height: 28rpx;
                        border-radius: 6rpx 6rpx 6rpx 6rpx;
                        border: 1rpx solid #F8B857;
                        line-height: 26rpx;
                        font-size: 16rpx;
                        font-family: Microsoft YaHei-Light, Microsoft YaHei;
                        font-weight: 300;
                        color: #F8B857;
                        text-align: center;
                    }
                }

                .house_flame_box {
                    width: 100%;
                    height: 36rpx;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin-bottom: 18rpx;

                    .flame_box {
                        height: 100%;
                        margin-right: 18rpx;
                        display: flex;
                        justify-content: flex-end;

                        .house_flame_image_box {
                            width: 32rpx;
                            height: 32rpx;

                            image {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .house_flame_text_box {
                            height: 29rpx;
                            font-size: 22rpx;
                            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                            font-weight: 400;
                            color: #A4A4A4;
                            line-height: 36rpx;
                            margin-left: 7rpx;
                        }
                    }

                    .sm_box {
                        height: 100%;
                        display: flex;
                        justify-content: flex-start;

                        .box_image_box {
                            width: 32rpx;
                            height: 32rpx;
                            margin-right: 7rpx;

                            image {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .box_text_box {
                            height: 29rpx;
                            font-size: 22rpx;
                            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                            font-weight: 400;
                            color: #A4A4A4;
                            line-height: 36rpx;
                        }
                    }
                }
            }

            .header_top_right_box {
                width: 270rpx;
                height: 100%;

                .header_top_right_txt_box {
                    width: 100%;
                    height: 31rpx;
                    font-size: 21rpx;
                    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                    font-weight: 400;
                    color: #D8D8D8;
                    line-height: 31rpx;
                    text-align: right;
                    margin-top: 43rpx;
                }
            }
        }

        .heider_line_box {
            width: 618rpx;
            height: 0rpx;
            margin: auto;
            opacity: 1;
            border: 1rpx solid #707070;
        }

        .heider_bot_box {
            width: 100%;
            height: 100rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .heider_bot_txt_box {
                width: 150rpx;
                height: 35rpx;
                font-size: 26rpx;
                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                font-weight: 400;
                color: #D8D8D8;
                line-height: 35rpx;
            }
        }
    }

    .swiper_contont_box {
        width: 100%;
        height: 670rpx;
        background-color: none;
        margin-bottom: 37rpx;

        .uni-margin-wrap {
            width: 100%;
            height: 100%;

            .swiper {
                width: 100%;
                height: 670rpx;

                .swiper-item {
                    width: 553rpx;
                    height: 100%;
                    margin: auto;

                    .swiper_title_box {
                        width: 100%;
                        height: 37rpx;
                        font-size: 28rpx;
                        font-weight: bold;
                        color: #D8D8D8;
                        text-align: center;
                        margin-bottom: 27rpx;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .swiper_pic_box {
                        width: 553rpx;
                        height: 553rpx;
                        background-image: url('https://new.qingfentool.vip/upload/image/20230818/bd02a6095121d90c5eb280258e27c3de.png');
                        background-size: 100% 100%;
                        margin: auto;
                        margin-bottom: 20rpx;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .zs_swiper_box {
                            width: 444rpx;
                            height: 440rpx;
                            background: #FFFFFF;
                            border-radius: 36rpx;

                            image {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }

                    .swiper_prz_box {
                        width: 100%;
                        height: 31rpx;
                        font-size: 24rpx;
                        font-weight: 400;
                        color: #D8D8D8;
                        text-align: center;
                    }
                }
            }
        }
    }

    ::-webkit-scrollbar {
        /* 隐藏滚动条 */
        display: none;
    }

    .product_box {
        width: 580rpx;
        height: 124rpx;
        margin: auto;
        overflow-x: auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 65rpx;


        .drawing_box {
            width: 120rpx;
            height: 120rpx;
            background-color: #393834;
            border-radius: 50%;
            flex-shrink: 0;
            margin-right: 33rpx;
            border: 5rpx solid #F8B857;

            image {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }

        .drawing1_box {
            width: 120rpx;
            height: 120rpx;
            background-color: #393834;
            border-radius: 50%;
            flex-shrink: 0;
            margin-right: 33rpx;
            border: 2rpx solid #D8D6AF;

            image {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }


    }

    .participant_box {
        width: 684rpx;
        height: 253rpx;
        background: #393834;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        opacity: 1;
        border: 1rpx solid #D8D6AF;
        margin: auto;
        padding: 26rpx 32rpx;

        .participant_top_box {
            width: 100%;
            height: 40rpx;
            font-size: 26rpx;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #D8D8D8;
            line-height: 40rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 22rpx;

            .participant_top_right_txt_box {
                display: flex;
                justify-content: flex-end;
                align-items: center;

                .participant_top_right_icon_box {
                    margin-right: 5rpx;
                }

                /deep/.u-icon {
                    font-size: 24rpx !important;
                }
            }
        }

        .talocrural_box {
            width: 100%;
            height: 140rpx;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            overflow: auto;

            .talocrural_dange_box {
                width: 81rpx;
                height: 100%;
                margin-right: 22rpx;
                flex-shrink: 0;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .people_box {
                    width: 81rpx;
                    height: 81rpx;
                    border-radius: 50%;
                    background-color: #fff;

                    image {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                }

                .talocrural_txt_box {
                    width: 90%;
                    height: 29rpx;
                    font-size: 22rpx;
                    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                    font-weight: 400;
                    color: #D8D8D8;
                    margin: auto;
                    text-align: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }

    .bottom_box {
        width: 100%;
        height: 230rpx;
        background-color: #262626;
    }

    .enter_box {
        width: 100%;
        height: 230rpx;
        background-color: #262626;
        position: fixed;
        bottom: 0;
        padding-top: 18rpx;

        .jion_box {
            width: 614rpx;
            height: 90rpx;
            background: linear-gradient(180deg, #FFE2B7 0%, #F5B143 100%);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            opacity: 1;
            border: 1rpx solid #D8D6AF;
            font-size: 32rpx;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-weight: bold;
            color: #000000;
            line-height: 90rpx;
            margin: auto;
            text-align: center;
            margin-bottom: 21rpx;
        }

        .already_box {
            width: 614rpx;
            height: 90rpx;
            background: #393834;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            opacity: 1;
            border: 1rpx solid #D8D6AF;
            line-height: 90rpx;
            font-size: 32rpx;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-weight: bold;
            color: #D8D8D8;
            margin: auto;
            text-align: center;
            margin-bottom: 21rpx;
        }

        .time_box {
            width: 100%;
            height: 31rpx;
            font-size: 24rpx;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #D8D8D8;
            text-align: center;
        }
    }

    /deep/.u-mode-center-box {
        background: none !important;
    }

    .detail_box {
        width: 684rpx;
        height: 976rpx;
        background: #393834;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        opacity: 1;
        border: 1rpx solid #D8D6AF;
        padding: 26rpx 32rpx 40rpx 32rpx;

        .detail_top_box {
            width: 100%;
            height: 40rpx;
            font-size: 26rpx;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #D8D8D8;
            line-height: 40rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 39rpx;
        }

        .detail_people_box {
            width: 100%;
            height: 820rpx;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center;
            overflow: hidden;
            overflow: auto;
            padding-left: 15rpx;

            image {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }

            .detail_dange_box {
                width: 81rpx;
                height: 136rpx;
                margin-right: 22rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                float: left;
                margin-bottom: 40rpx;

                .detail1_box {
                    width: 81rpx;
                    height: 81rpx;
                    border-radius: 50%;
                    background-color: #fff;
                }

                .detail_txt_box {
                    width: 90%;
                    height: 29rpx;
                    font-size: 22rpx;
                    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                    font-weight: 400;
                    color: #D8D8D8;
                    margin: auto;
                    text-align: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }
}
</style>